/*
 * @Author: LGX
 * @Date: 2022-03-30 09:53:19
 * @LastEditors: LGX
 * @LastEditTime: 2022-04-12 00:33:44
 * @FilePath: \erp-management-system\src\views\login\Login.jsx
 * @Description: 登录页
 * 
 */
import React, { useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'

import * as THREE from "three";
import { message } from 'antd';
import m from  './Login.module.css'
import axios from '../../utils/http';
export default function Login() {


    //拿挂载动画的节点
    const myRef = useRef()
    const nameRef = useRef()
    const pwdRef = useRef()
    var SEPARATION = 100, AMOUNTX = 60, AMOUNTY = 40;
    var container, camera, scene, renderer;
    var particles, particle, count = 0;
    var mouseX = 0, mouseY = 0;
    var windowHalfX = window.innerWidth;
    var windowHalfY = window.innerHeight;
    //挂载时初始化
    useEffect(() => {
        init();		//初始化
        animate();	//动画效果

    })
    //初始化
    const init = () => {
        container = document.createElement('div');	//创建容器
        myRef.current.appendChild(container);			//将容器添加到页面上
        camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 1, 1500);		//创建透视相机设置相机角度大小等
        camera.position.set(0, 450, 2000);		//设置相机位置

        scene = new THREE.Scene();			//创建场景
        particles = new Array();

        var PI2 = Math.PI * 2;
        //设置粒子的大小，颜色位置等
        var material = new THREE.ParticleCanvasMaterial({
            color: 0x0f96ff,
            vertexColors: true,
            size: 4,
            program: function (context) {
                context.beginPath();
                context.arc(0, 0, 0.01, 0, PI2, true);	//画一个圆形。此处可修改大小。
                context.fill();
            }
        });

        //设置长条粒子的大小颜色长度等
        var materialY = new THREE.ParticleCanvasMaterial({
            color: 0xffffff,
            vertexColors: true,
            size: 1,
            program: function (context) {

                context.beginPath();
                //绘制渐变色的矩形
                var lGrd = context.createLinearGradient(-0.008, 0.25, 0.016, -0.25);
                lGrd.addColorStop(0, '#16eff7');
                lGrd.addColorStop(1, '#0090ff');
                context.fillStyle = lGrd;
                context.fillRect(-0.008, 0.25, 0.016, -0.25);  //注意此处的坐标大小
                //绘制底部和顶部圆圈
                context.fillStyle = "#0090ff";
                context.arc(0, 0, 0.008, 0, PI2, true);    //绘制底部圆圈
                context.fillStyle = "#16eff7";
                context.arc(0, 0.25, 0.008, 0, PI2, true);    //绘制顶部圆圈
                context.fill();
                context.closePath();
                //绘制顶部渐变色光圈
                var rGrd = context.createRadialGradient(0, 0.25, 0, 0, 0.25, 0.025);
                rGrd.addColorStop(0, 'transparent');
                rGrd.addColorStop(1, '#16eff7');
                context.fillStyle = rGrd;
                context.arc(0, 0.25, 0.025, 0, PI2, true);    //绘制一个圆圈
                context.fill();

            }
        });

        //循环判断创建随机数选择创建粒子或者粒子条
        var i = 0;
        for (var ix = 0; ix < AMOUNTX; ix++) {
            for (var iy = 0; iy < AMOUNTY; iy++) {
                var num = Math.random() - 0.1;
                if (num > 0) {
                    particle = particles[i++] = new THREE.Particle(material);
                    // console.log("material")
                }
                else {
                    particle = particles[i++] = new THREE.Particle(materialY);
                    // console.log("materialY")
                }
                //particle = particles[ i ++ ] = new THREE.Particle( material );
                particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
                particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
                scene.add(particle);
            }
        }

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);
        //document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        //document.addEventListener( 'touchstart', onDocumentTouchStart, false );
        //document.addEventListener( 'touchmove', onDocumentTouchMove, false );
        window.addEventListener('resize', onWindowResize, false);
    }
    // 浏览器大小改变时重新渲染
    const onWindowResize = () => {
        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
    const animate = () => {
        requestAnimationFrame(animate);
        render();
    }
    const navigate = useNavigate();
    //将相机和场景渲染到页面上
    const render = () => {
        var i = 0;
        //更新粒子的位置和大小
        for (var ix = 0; ix < AMOUNTX; ix++) {
            for (var iy = 0; iy < AMOUNTY; iy++) {
                particle = particles[i++];
                //更新粒子位置
                particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
                //更新粒子大小
                particle.scale.x = particle.scale.y = particle.scale.z = ((Math.sin((ix + count) * 0.3) + 1) * 4 + (Math.sin((iy + count) * 0.5) + 1) * 4) * 50;	//正常情况下再放大100倍*1200
            }
        }

        renderer.render(scene, camera);
        count += 0.1;
    }
    //登录
    const login = () => {
        var name = nameRef.current.value
        var pwd = pwdRef.current.value
        if (name && pwd) {
            //发请求
            axios({
                url: '/login/employeeLogin',
                method: 'post',
                params: { account: name, password: pwd },
                header: { isLoding: false }
            }).then(res => {
                console.log(res,'11');
                if (res.data.code == 200) {
                    message.success('登录成功', 5);
                    localStorage.setItem('user', JSON.stringify(res.data.data.employee))
                    localStorage.setItem("token", res.data.token)
                    navigate(`/`, { replace: true })
                    // window.location.reload()
                } else {
                    message.error('用户名或密码错误', 3);
                    setTimeout(() => {
                        nameRef.current.value = ''
                        pwdRef.current.value = ''
                    }, 1000)
                }
            }).catch(err => {
                console.log(err);
            })
        } else {
            message.error('请输入完整的用户名或密码', 3);
        }
    }

    return (
        <div className={m.body} ref={myRef} >
            <div className="logos">
            </div>
            <div className={m.main}>
                <div className={m.login}>
                    <div className={m.logcon}>
                        <span className={m.title}>ERP管理系统</span>
                        <input type="text" ref={nameRef} className={m.name} placeholder="请输入用户名" />
                        <input type="password" ref={pwdRef} className={m.password} placeholder="请输入密码" />
                        <a className={m.loginbtn} onClick={login}>立即登录</a>
                    </div>
                </div>
            </div>
        </div>
    )
}